<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>G币专区</title>
    <link rel="stylesheet" href="__JS__/vjs/video-js.min.css">
    <link rel="stylesheet" href="__JS__/mescroll.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li, a {
            list-style: none;
            text-decoration: none;
        }

        .list .item {
            width: 100%;
            text-align: center;
            border-bottom: 6px solid #eee;
            overflow: hidden;
            position: relative;
        }

        .list .item .vod {
            height: 13.2rem;
            background-size: cover;
            position: relative;
        }

        .vod .play-btn {
            width: 48px;
            height: 48px;
            top: 50%;
            left: 50%;
            margin-left: -1.47rem;
            margin-top: -1.47rem;
            z-index: 10;
            position: absolute;
            background: url(/public/static/img/h5/play.svg) no-repeat center;
            background-size: cover;
        }

        .vod .duration {
            background-color: rgba(0, 0, 0, .5);
            width: 43px;
            height: 18px;
            line-height: 18px;
            bottom: 8px;
            right: 8px;
            z-index: 10;
            position: absolute;
            border-radius: .6rem;
            color: #fff;
            font-size: 12px;
        }

        .item .title {
            height: 4.5rem;
            padding: 12px 15px 0 14px;
            font-size: 15px;
            color: #fff;
            text-align: left;
            position: relative;
            top: 0;
            left: 0;
            z-index: 10;
            background: url(/public/static/img/h5/bg_title.png) no-repeat center;
            background-size: cover;
        }

        .item p {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 40px;
            font-size: 13px;
            color: #666;
            margin: 0 20px;
        }

        .item p span {
            padding-left: 22px;
            background-repeat: no-repeat;
            background-size: contain;
        }

        .share {
            background-image: url(/public/static/img/h5/share.png);
        }

        .look {
            background-image: url(/public/static/img/h5/look.png?5);
        }

        .zan {
            background-image: url(/public/static/img/h5/zan1.png);
        }

        .zan.active {
            background-image: url(/public/static/img/h5/zan2.png);
            color: #fd4d5e
        }

        /*播放器*/
        .vod-box {
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            z-index: 100;
        }

        .video-js {
            height: 13.2rem;
            width: 100%;
        }

        .video-js .vjs-big-play-button {
            display: none;
        }

        .video-js .vjs-error-display {
            display: none;
        }

        .video-js .vjs-progress-control:hover .vjs-progress-holder {
            font-size: 1em;
        }

        .video-js .vjs-fullscreen-control {
            display: none;
        }

        a, input, button {
            outline: none;
        }
    </style>
    <style>
        .mask {
            background: rgba(0, 0, 0, .6)
        }

        .mask, .mask_transparent {
            position: fixed;
            z-index: 1000;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0
        }

        @-webkit-keyframes c {
            0% {
                opacity: 0
            }

            to {
                opacity: 1
            }
        }

        @keyframes c {
            0% {
                opacity: 0
            }

            to {
                opacity: 1
            }
        }

        @-webkit-keyframes d {
            0% {
                opacity: 1
            }

            to {
                opacity: 0
            }
        }

        @keyframes d {
            0% {
                opacity: 1
            }

            to {
                opacity: 0
            }
        }

        .animate-fade-in {
            -webkit-animation: c ease .3s forwards;
            animation: c ease .3s forwards
        }

        .animate-fade-out {
            -webkit-animation: d ease .3s forwards;
            animation: d ease .3s forwards
        }

        @media screen and (min-width: 352px) {
            .dialog {
                width: 260px;
                margin: 0 auto
            }
        }

        .dialog {
            position: fixed;
            z-index: 5000;
            top: 50%;
            left: 12.26667vw;
            right: 12.26667vw;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            background-color: #fff;
            text-align: center;
            border-radius: 1.06667vw;
            overflow: hidden;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-flex-direction: column;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            flex-direction: column;
            max-height: 90%
        }

        .dialog__hd {
            padding: 8.53333vw 6.4vw 4.26667vw
        }

        .dialog__title {
            font-weight: 700;
            font-size: 4.53333vw;
            line-height: 1.4
        }

        .dialog__bd {
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding: 0 6.4vw;
            margin-bottom: 8.53333vw;
            font-size: 3.73333vw;
            line-height: 1.4;
            word-wrap: break-word;
            -webkit-hyphens: auto;
            hyphens: auto;
            color: rgba(0, 0, 0, .5);
        }

        .dialog__bd:first-child {
            min-height: 8.53333vw;
            padding: 8.53333vw 6.4vw 0;
            color: rgba(0, 0, 0, .9);
            -webkit-flex-direction: column;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            flex-direction: column;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            justify-content: center
        }

        .dialog__bd:first-child, .dialog__ft {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex
        }

        .dialog__ft {
            position: relative;
            line-height: 12.8vw;
            min-height: 12.8vw;
            font-size: 4.53333vw
        }

        .dialog__ft:after {
            content: " ";
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            height: 1px;
            border-top: 1px solid rgba(0, 0, 0, .1);
            color: rgba(0, 0, 0, .1);
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-transform: scaleY(.5);
            transform: scaleY(.5)
        }

        .dialog__btn {
            display: block;
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            color: #576b95;
            text-decoration: none;
            -webkit-tap-highlight-color: transparent;
            position: relative
        }

        .dialog__btn:active {
            background-color: #ececec;
        }

        .dialog__btn:after {
            content: " ";
            position: absolute;
            left: 0;
            top: 0;
            width: 1px;
            bottom: 0;
            border-left: 1px solid rgba(0, 0, 0, .1);
            color: rgba(0, 0, 0, .1);
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-transform: scaleX(.5);
            transform: scaleX(.5)
        }

        .dialog__btn:first-child:after {
            display: none
        }

        .dialog__btn_default {
            color: rgba(0, 0, 0, .9);
        }

        .header {
            width: 100%;
            height: 48px;
            background: #fff;
            position: fixed;
            top: 0;
            z-index: 9999;
        }

        .back {
            width: 1.8rem;
            height: 2rem;
            margin-top: .5rem;
            margin-left: .75rem;
            background: url() left no-repeat;
            background-size: 40%;
            z-index: 999999999;
            float: left;
        }

        .user_points {
            float: right;
            margin-top: .5rem;
            margin-right: .75rem;
            line-height: 2rem;
            color: #666;
        }

        .user_points span {
            font-size: 14px;
        }

        #mescroll {
            margin-top: 48px;
        }

        .spg {
            background: #f4f4f4;
            padding: 3px 8px !important;
            font-size: 12px;
            border-radius: 20px;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="back" onclick="window.android._goBack(true);"></div>
    <div class="user_points">G币余额：<span>{$user_points}</span></div>
</div>
<div class="page__bd mescroll" id="mescroll">
    <ul class="list"></ul>
</div>
<!--隐藏的播放器-->
<div class="vod-box">
    <video id="vjs" class="video-js" poster="/public/static/img/1.png" controls data-setup="{}">
        <source src="/public/static/img/1.mp4" type="video/mp4"/>
    </video>
</div>
<script id="tpl" type="text/html">
    <% for(i = 0; i < list.length; i++){ %>
    <li>
        <div class="item" data-fid="<%= list[i].fileId %>">
            <div class="vod" style="background-image:url(<%= list[i].pic %>);">
                <div class="title"><%= list[i].fileName %></div>
                <span class="play-btn"></span>
                <span class="duration"><%= $imports.s_to_hs(list[i].duration) %></span>
            </div>
            <p>
                <span class="spg"><%= list[i].pay_point %>G币</span>
                <span class="look"><%= list[i].play %></span>
            </p>
        </div>
    </li>
    <% } %>
</script>
<script src="__JS__/jquery.min.js"></script>
<script src="__JS__/template-web.js"></script>
<script src="__JS__/mescroll.min.js"></script>
<script src="__JS__/vjs/video.min.js"></script>
<script src="__JS__/common.js?v={$Think.config.commonJs}"></script>
<script>
    var $list = $('.list');
    var mescroll = new MeScroll("mescroll", {
        down: {
            auto: false,
            offset: 50,
            outOffsetRate: 0.05,
            inOffsetRate: 0.35,
            callback: downCallback //下拉刷新的回调
        },
        up: {
            auto: true,
            callback: upCallback //上拉回调
        }
    });

    function downCallback(mescroll) {
        setTimeout(function () {
            $list.html('');
            mescroll.resetUpScroll(false);
        }, 150);
    }

    function upCallback(page) {
        var pageNum = page.num;
        var pageSize = page.size;

        $.ajax({
            url: '/vod_points',
            type: 'POST',
            dataType: 'json',
            data: {pageNum: pageNum, pageSize: pageSize},
            success: function (res) {
                mescroll.endBySize(res.data.length, res.totalSize);
                $list.append(template('tpl', {list: res.data}));
            },
            error: function (e) {
                mescroll.endErr();
            }
        });
    }

    var Player = videojs('vjs', {}, function onPlayerReady() {
        pd_look30m(this);
    });

    videojs.log.level('off');


    //点击播放按钮播放视频
    var fid, $dialog;
    var $vodBox = $(".vod-box");
    $list.on('click', '.play-btn', function () {
        var $item = $(this).parent().parent();

        fid = $item.data('fid');
        video_stats(fid);
        Player.pause();

        //判断用户是否已经支付完成
        $.ajax({
            url: '/pay_vod_have?' + Math.random(),
            type: "POST",
            dataType: "json",
            data: {fid: fid},
            success: function (res) {
                if (res.code == 304) {
                    go_play($item, res.url);
                } else if (res.code == 501) {
                    //G币余额不足，去充值
                    $dialog = utils.dialog({
                        content: '你的G币不足，无法观看',
                        buttons: [{
                            label: '取消',
                            type: 'default',
                            onClick: function () {
                                $dialog.hide();
                            }
                        }, {
                            label: '充值',
                            type: 'primary',
                            onClick: function () {
                                window.open('/buy_nobility');
                            }
                        }]
                    });
                } else if (res.code == 200) {
                    //执行扣币逻辑
                    $dialog = utils.dialog({
                        content: '观看该视频，需支付' + res.points + '个G币',
                        buttons: [{
                            label: '取消',
                            type: 'default',
                            onClick: function () {
                                $dialog.hide();
                                //去充值
                            }
                        }, {
                            label: '确定',
                            type: 'primary',
                            onClick: function () {
                                $.ajax({
                                    url: '/pay_vod_points?' + Math.random(),
                                    type: "POST",
                                    dataType: "json",
                                    data: {fid: fid},
                                    success: function (res) {
                                        showMsg(res.msg);
                                        if (res.code == 200) {
                                            $(".user_points span").html(res['user_points']);
                                            var url = res['url'];
                                            go_play($item, url);
                                        }
                                    }
                                });
                            }
                        }]
                    });
                } else {
                    showMsg(res.msg);
                }
            }
        });
    });

    function go_play($item, url) {
        //加载视频
        $vodBox.show();
        Player.src(url);
        Player.load(url);
        Player.play();

        //移动已经元素绑定的播放器
        $item.append($vodBox);
    }

    //时间转换
    template.defaults.imports.s_to_hs = function (s) {
        var h;
        h = Math.floor(s / 60);
        s = s % 60;
        h += '';
        s += '';
        h = (h.length == 1) ? '0' + h : h;
        s = (s.length == 1) ? '0' + s : s;
        return h + ':' + s;
    };

    //视频统计
    function video_stats(current_vid) {
        console.log("视频统计");
        var currentTime = Player.currentTime();
        if (currentTime == 0) {
            return
        }

        $.ajax({
            url: '/video_stats_index',
            type: "POST",
            dataType: "json",
            xhrFields: {withCredentials: true},
            data: {
                'currentTime': currentTime,
                'current_vid': current_vid,
                'type': "inline",
                'channel': 11,
                'exp': (currentTime / Player.duration() > 0.7) ? 1 : 0
            },
            success: function (res) {
                console.log(res);
            }
        });
    }
</script>
<script>
    var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?7741d4cbd941d985eb296c908ef40bf2";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
</body>
</html>